<template>
    <div class="DSJPage">
        <div class="title-wrap">
            <div class="title-bg"></div>
            <span class="title animated bounce">{{sysTitle}}</span>
            <div class="title-center-bg"></div>
            <div class="left-title title-1 animated bounceInDown">{{static1.name}}</div>
            <div class="left-title title-2 animated bounceInDown">{{static2.name}}</div>
            <div class="right-title title-3 animated bounceInDown">{{static3.name}}</div>
            <div class="right-title title-4 animated bounceInDown">{{static4.name}}</div>
            <div class="time-whether-wrap animated bounceInLeft">
                <span class="time"><i class="icon"></i>{{curTime.time}}</span>
                <span class="whether">
                    <span><span>{{curTime.date}}</span><span>{{curTime.week}}</span></span>
                    <img class="icon" :src="translateWhetherSrc(whether)"></span>
            </div>
        </div>
        <div class="content">
            <div class="static-panel panel-1 animated bounceInLeft">
                <p class="static-title"><i></i><span class="text" :title="static1.name">{{static2.name}}</span></p>
                <div id="panel-1" style="width:100%;height:215px;z-index: 2;"></div>
                <div class="inner"></div>
                <div class="outer"></div>
            </div>
            <div class="static-panel panel-2 animated bounceInLeft">
                <p class="static-title"><i></i><span class="text" :title="static2.name">{{static2.name}}</span></p>
                <el-scrollbar wrap-class="list-wrap">
                    <div class="item" v-for="(item,index) in static2.list" :key="item.id">
                        <p class="name" :style="`color:${item.color}`"><i class="index">{{index+1}}</i>{{item.name}}</p>
                        <p class="info">
                            <span>数量：<i :style="`color:${item.color}`">{{item.count}}</i>个</span>
                            <span>占比：<i :style="`color:${item.color}`">{{item.count}}</i>/%</span>
                        </p>
                    </div>
                </el-scrollbar>
            </div>
            <div class="static-panel panel-3 animated bounceInRight">
                <p class="static-title"><i></i><span class="text" :title="static3.name">{{static2.name}}</span></p>
                <div id="panel-3" style="width:100%;height:355px"></div>
            </div>
            <div class="static-panel panel-4 animated bounceInRight">
                <p class="static-title"><i></i><span class="text" :title="static4.name">{{static2.name}}</span></p>
                <div id="panel-4" style="width:100%;height:250px"></div>
            </div>
            <div class="center">

            </div>
        </div>
    </div>
</template>

<script>
    import {reactive, computed, watch, ref, onBeforeUnmount} from "vue"
    import {useRoute} from "vue-router"
    import DSJPageService from "@/services/DSJPage.service"
    import FreeApiService from "@/services/FreeApi.service"
    import timeUtil from "@/utils/Time.util"
    import useDJSPageGraph from "@/hooks/useDJSPageGraph"
    import filter from "@/filter/filterForService"

    export default {
        name: "DSJPage",
        setup() {
            const {initPie, initBar, initRadar} = useDJSPageGraph()
            const route = useRoute()
            const sysTitle = route.query.name

            // 获取时钟
            let timeArr = timeUtil.getFormatTime().split(" ")
            let curTime = ref({
                time: timeArr[1],
                date: timeArr[0],
                week: timeUtil.getWeekDay()
            })
            let timer = setInterval(() => {
                timeArr = timeUtil.getFormatTime().split(" ")
                curTime.value = {
                    time: timeArr[1],
                    date: timeArr[0],
                    week: timeUtil.getWeekDay()
                }
            }, 500)
            onBeforeUnmount(() => {
                clearInterval(timer)
            })

            // 获取天气
            let whether = ref({})
            const queryFreeDay = () => {
                FreeApiService.queryFreeDay({city: "重庆"}).then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        whether.value = data
                    }
                })
            }
            const translateWhetherSrc = (whether) => {
                switch (whether.wea_img) {
                    case "yun":
                        return filter("relativePath2Img")("01/whether.png")
                    case "qing":
                        return filter("relativePath2Img")("01/whether.png")
                    case "rain":
                        return filter("relativePath2Img")("01/whether.png")
                }
            }
            queryFreeDay()

            const static1 = reactive({
                name: "",
                list: []
            })
            // 查询统计1列表及其名称
            const queryStatic1 = () => {
                DSJPageService.queryStatic1().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        static1.list = _.sortBy(data.list, "count").reverse()
                        static1.name = data.name

                        // 初始化饼图
                        initPie("panel-1", {
                            name: static1.name, data: _.map(static1.list, item => {
                                return {
                                    name: item.name,
                                    value: item.count,
                                }
                            })
                        })
                    }
                })
            }

            const static2 = reactive({
                name: "",
                list: []
            })
            // 查询统计2列表及其名称
            const queryStatic2 = () => {
                DSJPageService.queryStatic2().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        static2.list = _.sortBy(data.list, "count").reverse()
                        static2.name = data.name
                    }
                })
            }

            const static3 = reactive({
                name: "",
                list: []
            })
            // 查询统计3列表及其名称
            const queryStatic3 = () => {
                DSJPageService.queryStatic3().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        static3.list = _.sortBy(data.list, "count")
                        static3.name = data.name
                        initBar("panel-3", {
                            name: static3.name,
                            data: _.map(static3.list, item => item.count),
                            yAxisData: _.map(static3.list, item => item.name)
                        })
                    }
                })
            }

            const static4 = reactive({
                name: "",
                list: []
            })
            // 查询统计4列表及其名称
            const queryStatic4 = () => {
                DSJPageService.queryStatic4().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        static4.list = _.sortBy(data.list, "count").reverse()
                        static4.name = data.name
                        initRadar("panel-4", {
                            name: static4.name,
                            data: _.map(static4.list, item => item.count),
                            indicator: _.map(static4.list, item => {
                                return {name: item.name}
                            })
                        })
                    }
                })
            }

            queryStatic1()
            queryStatic2()
            queryStatic3()
            queryStatic4()

            return {
                sysTitle,
                curTime,
                whether,
                translateWhetherSrc,
                static1,
                static2,
                static3,
                static4
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@/common/css/common.style.styl"
    .DSJPage
        padding 0 20px
        color: #fff
        width 100%
        height 100%
        bgImg("01/home-screen-bg.png")
        background-size 100% 100%
        .title-wrap
            position relative
            height 114px
            .title-bg
                position absolute
                left 0
                top 58px
                width: 100%
                height: 38px;
                bgImg("01/top-bg-line.png")
                background-size 100% 100%
            .title-center-bg
                bgImg("01/top-center-bg.png")
                background-size 100% 100%
                position: absolute;
                left: 50%;
                top: 5px;
                width: 587px;
                height: 178px;
                transform: translate(-50%);
            .title
                font-size: 38px;
                position: absolute;
                top: 30px;
                left: 39%;
                transform: translateX(-50%);
            .left-title, .right-title
                text-align center
                background-size 100% 100%
                width: 156px;
                height: 54px;
                line-height 54px;
                font-size: 16px;
                position absolute
                top: 5px
                ellipsis()
                padding: 0 10px
            .left-title
                bgImg("01/left-static-bg.png")
                &.title-1
                    left: 172px
                &.title-2
                    left: 385px
            .right-title
                bgImg("01/right-static-bg.png")
                &.title-3
                    right: 392px
                &.title-4
                    right: 179px
            .time-whether-wrap
                position: absolute
                left 23px
                top: 79px
                display flex
                align-items center
                .time
                    display: flex
                    align-items center
                    margin-right 25px
                    font-size: 24px;
                    .icon
                        display: inline-block
                        bgImg("01/time.png")
                        background-size 100% 100%
                        width: 25px
                        height: 24px
                        margin-right: 10px
                .whether
                    display flex
                    align-items center
                    & > span
                        display flex
                        flex-direction column
                        align-items center
                        margin-right 30px
                        &:first-child
                            font-size 14px
                        &:last-child
                            font-size 12px
                    .icon
                        display: inline-block
                        width: 32px
                        height: 27px
        .content
            height calc(100% - 114px)
            position relative
            .static-panel
                position absolute
                &.panel-1
                    top: 0
                    left: 0
                    width: 372px;
                    height: 299px;
                    .inner, .outer
                        border-radius 50%
                        position: absolute
                        left: 50%
                        top 60%
                        transform translate(-50%, -50%)
                        border 2px solid #3dd1f9;
                    .inner
                        width: 40px
                        height: 40px
                    .outer
                        width: 180px
                        height: 180px
                &.panel-2
                    top: 349px
                    left: 0
                    width: 372px;
                    height 546px
                &.panel-3
                    right 0
                    top 0
                    width: 424px;
                    height: 500px;
                &.panel-4
                    right 0
                    top 550px
                    width: 424px;
                    height 257px
                .static-title
                    border-bottom: 1px solid #384b7e;
                    font-size: 16px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    margin-bottom 15px
                    .text
                        ellipsis()
                    i
                        display inline-block
                        width: 2px;
                        height: 23px;
                        background-color: #00e8e8;
                        border-radius: 1px;
                        margin-right: 20px
                .list-wrap
                    .item
                        font-size 14px
                        bgImg("01/title-border-bg.png")
                        background-size cover
                        background-position: center;
                        width 100%
                        height 120px
                        padding: 25px 20px
                        display flex
                        flex-direction column
                        justify-content space-between
                        .name
                            font-size: 18px;
                        .index
                            display inline-block
                            width: 24px;
                            height: 24px;
                            text-align center
                            line-height 24px
                            background-color: #0cfeb8;
                            border-radius 50%
                            font-size: 16px;
                            color: #081331;
                            margin-right: 10px
                        .info
                            margin-left: 35px
                            display flex
                            justify-content space-between
                            i
                                font-size 30px
            .center
                bgImg("01/center.png")
                background-size 100% 100%
                width 1512px
                height 868px
                margin 0 auto
</style>